<template>
  <h1>computed</h1>
  <h2>{{ res }}</h2>
  <hr>
  <ul>
    <h2> <input type="checkbox" v-model="checkAll"> 全选 </h2>
    <li v-for="item in arr2" :key="item.id">
      <input type="checkbox" v-model="item.checked"> {{ item.hobby }}
    </li>
  </ul>
</template>
<!-- // setup作为script的属性 是 setup函数的语法糖 -->
<script setup>
// 引入子组件
import { ref, computed , onMounted , onUpdated } from 'vue'
let arr = ref([1, 2, 3, 4, 5])
// 1.一般写法
let res = computed(() => arr.value.filter(item => item > 3))
// 2.完整写法;
let arr2 = ref([{
  hobby: "唱歌",
  id: 1,
  checked: false
}, {
  hobby: "游戏",
  id: 2,
  checked: false
}, {
  hobby: "刷剧",
  id: 3,
  checked: false
}])
let checkAll = computed({
  get(){
    return arr2.value.every(item=>item.checked)
  },
  set(val){
    arr2.value.forEach(item=>item.checked=val)
  }
})
// 注意：computed的返回值 是一个 ref对象;
onUpdated(()=>{
  console.log(checkAll.value);
})
</script>
<script>
export default {
  name: 'App',
}
</script>
